<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span  >新增建议</span>
      </div>
      <div class="div" >
        <button style="background: none;border: none" class="solt" @click="keep()" >保存</button>
      </div>
    </header>
    <div class="content">
      <div class="p_header" style="justify-content: space-between">
        <div style="display: flex;align-items: center"><a class="hengGang"></a><span>药品信息</span></div>
        <div style="display: flex;">
          <button class="lookBtn">服药模板调用</button>
          <button class="lookBtn" style="margin-left: 8px">历史服药调用</button>
        </div>
      </div>
      <ul class="yaopinUl">
        <li @click="yaopinShow = true">
          <div>
            <span>药品名称</span>
          </div>
          <div>
            <input type="text" readonly v-model="mingcheng" placeholder="请选择药品名称">
            <img class="tan" v-show="yaopinShow === false" src="../../../assets/下弹灰@2x.png" alt="">
            <img class="tan" v-show="yaopinShow === true" src="../../../assets/上弹灰@2x.png" alt="">
          </div>
        </li>
        <li class="smallLi">
          <div class="smallLi_left">
            <div style="width: 20%;">
              <span >规格</span>
            </div>
            <div>
              <input type="text" readonly v-model="guige" placeholder="规格">
            </div>
          </div>
          <div class="smallLi_right">
            <div>
              <span>单位</span>
            </div>
            <div>
              <input type="text" readonly v-model="danwei" placeholder="单位">
            </div>
          </div>
        </li>

        <li class="smallLi">
          <div class="smallLi_left" @click="pincishow = true">
            <div>
              <span>频次</span>
            </div>
            <div>
              <input type="text"
                     style="width: 75%;!important;"
                     readonly
                     v-model="pinci"
                     placeholder="频次">
              <img class="tan" v-show="pincishow === false" src="../../../assets/下弹灰@2x.png" alt="">
              <img class="tan" v-show="pincishow === true" src="../../../assets/上弹灰@2x.png" alt="">
            </div>
          </div>
          <div class="smallLi_right" @click="yongfashow = true">
            <div>
              <span>用法</span>
            </div>
            <div style="display: flex;align-items: center">
              <input type="text"
                     readonly
                     v-model="yongfa"
                     placeholder="用法">
              <img class="tan" v-show="yongfashow === false" src="../../../assets/下弹灰@2x.png" style="margin-left: 5px!important;" alt="">
              <img class="tan" v-show="yongfashow === true" src="../../../assets/上弹灰@2x.png" style="margin-left: 5px!important;" alt="">
            </div>
          </div>
        </li>

        <li class="smallLi">
          <div class="smallLi_left" >
            <div>
              <span>一次用量</span>
            </div>
            <div>
              <input type="text" v-model="liang" placeholder="一次用量">
            </div>
          </div>
          <div class="smallLi_right">
            <div>
              <span>总量</span>
            </div>
            <div>
              <input type="text" v-model="zong" placeholder="总量">
            </div>
          </div>
        </li>
   <!--     <li>
          <div>
            <span>规格</span>
          </div>
          <div>
            <input type="text" readonly v-model="guige" placeholder="规格">
          </div>
        </li>
        <li>
          <div>
            <span>单位</span>
          </div>
          <div>
            <input type="text" readonly v-model="danwei" placeholder="请输入单位">
          </div>
        </li>
        <li @click="pincishow = true">
          <div>
            <span>频次</span>
          </div>
          <div>
            <input type="text"
                   readonly
                   v-model="pinci"
                   placeholder="请选择频次">
            <img class="tan" v-show="pincishow === false" src="../../../assets/下弹灰@2x.png" alt="">
            <img class="tan" v-show="pincishow === true" src="../../../assets/上弹灰@2x.png" alt="">
          </div>
        </li>
        <li @click="yongfashow = true">
          <div>
            <span>用法</span>
          </div>
          <div>
            <input type="text"
                   readonly
                   v-model="yongfa"
                   placeholder="请选择用法">
            <img class="tan" src="../../../assets/下弹灰@2x.png" alt="">
            &lt;!&ndash;            <img class="tan" v-show="yaopinShow === true" src="../../assets/上弹灰@2x.png" alt="">&ndash;&gt;
          </div>
        </li>
        <li>
          <div>
            <span>一次用量</span>
          </div>
          <div>
            <input type="text" v-model="liang" placeholder="请输入一次用量">
          </div>
        </li>
        <li>
          <div>
            <span>总量</span>
          </div>
          <div>
            <input type="text" v-model="zong" placeholder="请输入总量">
          </div>
        </li>-->
      </ul >
      <button class="addBtn" @click="add()" >
        <img src="../../../assets/白添加.png" alt="">
        增加药品
      </button>
      <p class="p_header"><a class="hengGang"></a><span>处方信息</span></p>
      <div class="yaoPinList">
        <ul v-for="(item, index) in tableList" :key="index">
          <span class="badge">{{index + 1}}</span>
          <li class="li_haeder" style="justify-content: space-between;align-items: center !important;">
            <div style="">
              <p style="margin-bottom: 5px">
                <span style="font-size: 15px">{{item.name}}</span>
                <span style="font-size: 13px;color: #666666">(药品名称)</span>
              </p>
              <p style="font-size: 13px;color: #999">规格：{{item.specifications}}</p>
            </div>
            <div>
              <a @click="deleteAdd(index)"
                 style="width:50px;
                    height: 22px;
                    display:flex;
                    align-items:center;
                    justify-content: center;
                    color: #1da4f2;
                    font-size: 13px;
                    border-radius: 3px;
                    background: rgba(29, 164, 242, 0.1)"
              >删除</a>
<!--              <img @click="deleteAdd(index)" style="width: 18px;height: 18px;" src="../../../assets/垃圾桶@2x.png" alt="">-->
            </div>
          </li>
          <li class="li_yaofang">
            <div>
              <img src="../../../assets/单位@2x.png" alt="">
              <span>单位：{{item.danwei}}</span>
            </div>
            <div>
              <img src="../../../assets/频次@2x.png" alt="">
              <span>频次：{{item.pinci}}</span>
            </div>
          </li>
          <li class="li_yaofang">
            <div>
              <img src="../../../assets/用法@2x.png" alt="">
              <span>用法：{{item.yongfa}}</span>
            </div>
            <div>
              <img src="../../../assets/一次用量@2x.png" alt="">
              <span>一次用量：{{item.yongliang}}</span>
            </div>
          </li>
          <li class="li_yaofang">
            <div>
              <img src="../../../assets/总量@2x.png" alt="">
              <span>总量：{{item.zongliang}}</span>
            </div>
            <div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <van-popup v-model="yaopinShow"
               :close-on-click-overlay="false"
               round position="bottom">
      <van-picker
        title="请选择药品名称"
        show-toolbar
        :columns="yaopinColumns"
        @cancel="yaopinShow = false, mingcheng = '', guige = '', danwei = ''"
        @confirm="yaopinonConfirm"
        confirm-button-text="下一步"
      >
        <template #columns-top>
          <div class="search">
            <form action="/">
              <van-search
                v-model="yaopinValue"
                show-action
                placeholder="请输入药品名称"
                @search="yaopinonSearch"
                @keyup.enter="yaopinonSearch"
                @input="yaopinonSearch"
                shape="round"
              >
                <template #action>
<!--                  <div @click="yaopinonSearch" class="solt">搜索</div>-->
                </template>
              </van-search>
            </form>
          </div>
        </template>
      </van-picker>
    </van-popup>
    <van-popup v-model="guigeshow"
               :close-on-click-overlay="false"
               round position="bottom">
      <van-picker
        title="请选择规格"
        show-toolbar
        :columns="guigeColumns"
        :close-on-click-overlay="false"
        @cancel="guigeshow = false, yaopinShow = true"
        @confirm="guigeonConfirm"
      >
      </van-picker>
    </van-popup>
    <van-popup v-model="pincishow" round position="bottom">
      <van-picker
        title="请选择频次"
        show-toolbar
        :columns="pinciColumns"
        @cancel="pincishow = false"
        @confirm="pincionConfirm"
      >
      </van-picker>
    </van-popup>
    <van-popup v-model="yongfashow" round position="bottom">
      <van-picker
        title="请选择用法"
        show-toolbar
        :columns="yongfaColumns"
        @cancel="yongfashow = false"
        @confirm="yongfaonConfirm"
      >
      </van-picker>
    </van-popup>
    <van-dialog v-model="delshow"
                width="200px"
                confirm-button-color="#1da4f2"
                title="确定删除该药品吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'BuildJianyi',
  data () {
    return {
      tableList: [],
      // 药品名称
      yaopinShow: false,
      yaopinColumns: [],
      mingcheng: '',
      yaopinValue: '',
      // 规格
      guige: '',
      guigeshow: false,
      guigeColumns: [],
      // 单位
      danwei: '',
      guiGeAll: [],
      // 频次
      pinci: '',
      pincishow: false,
      pinciColumns: ['一天一次', '一天两次', '一天三次'],
      // 用法
      yongfa: '',
      yongfashow: false,
      yongfaColumns: [],
      liang: '',
      zong: '',
      type: '',
      delIndex: 0,
      delshow: false,
      data_user_id: this.$route.query.data_user_id, // 档案人id
      op_user_id: this.$route.query.op_user_id // 登陆人id
    }
  },
  mounted () {
    this.findYaoPinQuChongZiDian()
    this.getlistByType()
  },
  methods: {
    // 用法字典
    getlistByType () {
      this.$http.listByType({dict_type: 'drug_useage'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            for (var i = 0; i < res.data.data.length; i++) {
              this.yongfaColumns.push(res.data.data[i].dict_name)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 保存
    keep () {
      if (this.tableList.length <= 0) {
        Toast('请添加药品信息')
        return false
      }
      this.$http.insertPrescription({
        'op_user_id': this.op_user_id,
        'data_user_id': this.data_user_id,
        'drugs': this.tableList
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除 药品
    deleteAdd (index) {
      console.log(index)
      // this.tableList.splice(index, 1)
      this.delIndex = index
      this.delshow = true
    },
    // 删除
    delConfirm () {
      this.tableList.splice(this.delIndex, 1)
    },
    // 药品添加
    add () {
      var obj = {
        name: this.mingcheng,
        yongliang: this.liang,
        yongfa: this.yongfa,
        pinci: this.pinci,
        danwei: this.danwei,
        zongliang: this.zong,
        specifications: this.guige,
        type: this.type.toString()
      }
      if (this.mingcheng.length > 0) {
        for (var i = 0; i < this.tableList.length; i++) {
          if (
            this.mingcheng === this.tableList[i].name &&
            this.guige === this.tableList[i].specifications &&
            this.danwei === this.tableList[i].danwei
          ) {
            Toast('请勿重复添加药品')
            return false
          }
        }
        this.tableList.push(obj)
        this.mingcheng = ''
        this.liang = ''
        this.yongfa = ''
        this.pinci = ''
        this.danwei = ''
        this.zong = ''
        this.guige = ''
        this.yaopinValue = ''
        this.type = ''
        this.findYaoPinQuChongZiDian()
        console.log(this.tableList)
      } else {
        Toast('请选择药品名称')
      }
    },
    // 药品 用法的确定按钮
    yongfaonConfirm (value, index) {
      this.yongfa = value
      this.yongfashow = false
    },
    // 药品 频次的确定按钮
    pincionConfirm (value, index) {
      this.pinci = value
      this.pincishow = false
    },
    /* 药品字典 去重 名称 findYaoPinQuChongZiDian */
    findYaoPinQuChongZiDian () {
      this.$http.findYaoPinQuChongZiDian({name: this.yaopinValue})
        .then(res => {
          console.log(res)
          var _this = this
          if (res.data.status === 'success') {
            _this.allYaopin = res.data.data
            _this.yaopinColumns = []
            res.data.data.forEach(function (current, index, arr) {
              _this.yaopinColumns.push(current.name)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 药品字典单位，规格
    getfindYaoPinZiDian () {
      this.$http.findYaoPinZiDian({name: this.mingcheng})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var _this = this
            _this.guigeColumns = []
            _this.guiGeAll = res.data.data
            if (res.data.data.length === 1) {
              this.guige = this.guiGeAll[0].standards
              this.danwei = this.guiGeAll[0].unit
              this.guigeshow = false
            } else {
              this.guigeshow = true
            }
            res.data.data.forEach(function (current, index, arr) {
              _this.guigeColumns.push(current.standards + '(' + current.unit + ')')
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 药品搜索
    yaopinonSearch () {
      this.findYaoPinQuChongZiDian()
    },
    // 药品下一步
    yaopinonConfirm (val, index) {
      this.mingcheng = val
      this.yaopinShow = false
      this.getfindYaoPinZiDian()
      this.type = this.allYaopin[index].type
    },
    // 规格确认按钮
    guigeonConfirm (value, index) {
      this.guige = this.guiGeAll[index].standards
      this.danwei = this.guiGeAll[index].unit
      this.guigeshow = false
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100vh;
    background: #FAF9FE;
    overflow: scroll;
  }
  header{
    width: 100vw;
    height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) button{
    margin-right: 15px;
  }
  .div:nth-child(3) img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .solt{
    color: #1DA4F2;
  }
  .hengGang{
    display: block;
    width: 2px;
    height: 15px;
    background: #1DA4F2;
    border-radius: 2px;
    margin-right: 8px;
  }
  .p_header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    background: white;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
  }
  .content .yaopinUl{
    width: 100%;
    background: white;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .lookBtn{
    font-size: 11px !important;
    /*height: 18px;*/
    background: white;
    color: #1DA4F2;
    border: 1px solid #1DA4F2;
    padding: 2px 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tan{
    width: 13px;
    height: 7px;
  }
  .content .yaopinUl li{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
  .content .yaopinUl li>*{
    font-size: 15px;
  }
  .content .yaopinUl li input{
    border: none;
    text-align: right;
  }
  .content .addBtn{
    width: 90%;
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    border-radius: 22px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    margin: 10px auto;
  }
  .content button img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .badge{
    width: 14px;
    height: 14px;
    background: #1DA4F2;
    border-radius: 2px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -5px;
    top: -5px;
    font-size: 11px;
  }
  .yaoPinList{
    width: 100%;
  }
  .li_haeder{
    height: auto !important;
    display: flex;
    /*align-items: center;*/
    padding: 8px 10px !important;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .li_haeder div:nth-child(1){
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .li_yaofang{
    height: 25px !important;
    font-size: 13px!important;
  }
  .li_yaofang div{
    width: 50%;
    display: flex;
    align-items: center;
  }
  .li_yaofang img{
    width: 13px;
    height: 12px;
    margin-right: 5px;
  }
  .yaoPinList ul{
    width: 92%;
    margin: 10px auto;
    background: white;
    position: relative;
    border-radius: 10px;
  }
  .yaoPinList ul li{
    border: none;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
  }
  /deep/ .van-picker__toolbar{
    font-size: 15px !important;
    font-weight: bold;
  }
  /deep/ .van-picker__cancel,
  /deep/ .van-picker__confirm{
    font-size: 15px !important;
    font-weight: bold;
  }
  /deep/ .van-picker__confirm{
    color: #1DA4F2;
  }
  .search{
    width: 100%;
    font-weight: bold;
  }
  /deep/ .van-search__action{
    font-size: 15px;
  }
  /deep/ .van-picker-column__item--selected{
    font-size: 19px !important;
    color: #1DA4F2;
  }
  .smallLi{
    border-bottom: none !important;
  }
  .smallLi_left, .smallLi_right{
    width: 47%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
  .smallLi_left div:nth-child(1),
  .smallLi_right div:nth-child(1)
  {
    width: 100px;
  }
  .smallLi_left div:nth-child(2),
  .smallLi_right div:nth-child(2)
  {
    width: 70%;
    overflow: hidden;
  }
  .smallLi div input {
    width: 100%;
  }
</style>
